<template>
  <div>
    <v-nav :current="7" @changelang="changelang"></v-nav>
    <img src="@/components/lianxi.png" alt="" style="width: 100%;">
    <h1>{{staticText[0]}}</h1>
    <div class="list" v-for="list in lists" :key="list.id">
      <div>
        <h2>{{list.post_title}}</h2>
        <div>
          <img src="@/assets/phone.png" alt="">
          <span>{{staticText[13]}}：{{list.post_phone}}</span>
        </div>
        <div>
          <img src="@/assets/youxiang.png" alt="">
          <span>{{staticText[14]}}：{{list.post_excerpt}}</span>
        </div>
        <div>
          <img src="@/assets/address.png" alt="">
          <span>{{staticText[15]}}：{{list.post_dizhi}}</span>
        </div>
      </div>
    </div>
    <div class="space73"></div>
    <div style="display:flex;justify-content: center;" class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="6"
        :small="true"
        @current-change="handleCurrentChanges"
        >
      </el-pagination>
    </div>
    <div class="space73"></div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vNav from '@/components/nav/nav'
import vFooter from '@/components/footer'
import {mapGetters} from 'vuex'
import { getChatUsData } from '@/services/api.js'
import { getChatUsDataEn } from '@/services/api_en.js'
export default {
  data () {
    return {
      lists: [],
      page: 1,
      total: null
    }
  },
  props: {
  },
  components: {
    vNav,
    vFooter
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'staticText': 'staticText'
    })
  },
  methods: {
    _getChList () {
      console.log(1)
      let params = {
        page: this.page,
        num: 6
      }
      getChatUsData(params).then((res) => {
        console.log('进入1')
        console.log(res)
        this.lists = res.data
        this.total = res.total
      })
    },
    _getEnList () {
      console.log(2)
      let params = {
        page: this.page,
        num: 6
      }
      getChatUsDataEn(params).then((res) => {
        console.log('进入')
        console.log(res)
        this.lists = res.data
        this.total = res.total
      })
    },
    handleCurrentChanges (val) {
      this.page = val
      let params = {
        page: this.page,
        num: 6
      }
      if (this.lang === 1) {
        getChatUsData(params).then((res) => {
          this.lists = res.data
        })
      }
      if (this.lang === 2) {
        getChatUsDataEn(params).then((res) => {
          this.lists = res.data
        })
      }
    },
    version (type) {
      if (this.lang === 1) {
        this._getChList()
      }
      if (this.lang === 2) {
        this._getEnList()
      }
    },
    changelang (res) {
      if (res === 1) {
        this._getChList()
      }
      if (res === 2) {
        this._getEnList()
      }
    }
  },
  created () {
    this.version()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../util/common.scss';
h1 {
  padding: 36rem/$font-size-base 0;
  font-size: 30rem/$font-size-base;
  letter-spacing: 1px;
  color: #333;
  font-weight: bolder;
  text-align: left;
  padding-left: 30rem/$font-size-base;
}
.list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  // height: 275rem/$font-size-base;
  background-color: #f5f5f5;
  margin-bottom: 10rem/$font-size-base;
  >div {
    width: 690rem/$font-size-base;
    margin: 0 auto;
    margin-bottom: 10rem/$font-size-base;
    padding: .4rem 0;
    h2 {
      font-size: 26rem/$font-size-base;;
      letter-spacing: 1px;
      color: #0051bb;
      margin-bottom: 30rem/$font-size-base;
    }
    >div {
      margin-bottom: 15rem/$font-size-base;
      img {
        width: 18rem/$font-size-base;
        height: 20rem/$font-size-base;
      }
      span {
        margin-left: 22rem/$font-size-base;
        font-size: 24rem/$font-size-base;
        color: #333;
      }
    }
    >div:last-child {
      margin-bottom: 0;
    }
  }
}
.space73 {
  width: 100%;
  height: 30rem/$font-size-base;
  background-color: #fff
}
</style>
